<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个列表过度</title>
    <script src="/VUE/vue2.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
    <style>
        /* 进场动画: 随便名字-enter-active */
        .isShow-enter-active {
            animation: isShow 1s;
        }

        /* 出场动画 */
        .isShow-leave-active {
            animation: isShow 1s reverse;
        }

        @keyframes isShow {
            0% {
                opacity: 0;
                transform: translateX(100px);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
<div id="box">
    <h2>事项安排表</h2>
    <label>
        <input type="text" v-model="addText" placeholder="请输入事项">
    </label>
    <button @click="handleAdd()">add</button>


    <!-- 对于列表中每一项单独动画，需要用transition-group，它会自动实例化成span标签，也可以通过tag特性更换成其他元素；而且需要设定key值，key值不能为index -->
    <transition-group tag="ul" name="isShow" v-show="datalist.length">
        <li v-for="(data,index) in datalist" :key="data">
            {{index + 1}}. {{data}}
            <button @click="handleDel(index)">del</button>
        </li>
    </transition-group>

    <br><br>
    <div v-show="!datalist.length">代办事项，空空如也</div>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            datalist: [],
            addText: '',
        },
        methods: {
            handleAdd() {
                this.datalist.push(this.addText);
                //利用双向绑定，清空输入框
                this.addText = '';
            },
            handleDel(index) {
                this.datalist.splice(index, 1);
            }
        }
    })
</script>
</body>
</html>